<template>
  <div>
    <el-dialog
      :title="getShow"
      :visible.sync="visible"
      width="35%"
      @close="closeFn"
    >
      <el-form
        label-width="120px"
        :model="formDate"
        :rules="rules"
        validate
        ref="box"
      >
        <el-form-item label="部门负责人" prop="text">
          <el-input
            type="text"
            placeholder="请输入内容"
            v-model="formDate.text"
            maxlength="15"
            show-word-limit
            :disabled="display==='see'?true:false"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="部门介绍" prop="textarea">
          <el-input
            type="textarea"
            placeholder="请输入内容"
            v-model="formDate.textarea"
            maxlength="40"
            show-word-limit
            :rows="3"
            :disabled="display==='see'?true:false"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button
          @click="closeFn"
          style="background-color: #fbf4f0"
          :class="display === 'see' ? 'show' : ''"
          >取 消</el-button
        >
        <el-button
          type="primary"
          @click="addRegion"
          :class="display === 'see' ? 'show' : ''"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <Search @searchFn="searchFn" ref="search"></Search>
    <div class="table">
      <el-button
        type="primary"
        icon="el-icon-circle-plus-outline"
        @click="getArea"
        >新建</el-button
      >
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="index" label="序号" width="150">
        </el-table-column>
        <el-table-column prop="name" label="区域名称" width="300">
        </el-table-column>
        <el-table-column prop="nodeCount" label="点位数" width="450">
        </el-table-column>
        <el-table-column prop="remark" label="备注说明" width="450">
        </el-table-column>
        <el-table-column label="操作" id="index">
          <template #default="{ row }">
            <div class="actions">
              <span style="color: blue; cursor: pointer" @click="seeFn(row.id)"
                >查看详情</span
              >
              <span
                style="color: blue; cursor: pointer"
                @click="changeFn(row.id)"
                >修改</span
              >
              <span
                style="color: red; cursor: pointer"
                @click="delRegion(row.id)"
                >删除</span
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="btnspan">
        <span>共{{ totalCount }}条记录</span>
        <span>第{{ pageIndex }}/{{ totalPage }}页</span>
      </div>
      <div class="btnbox">
        <el-button type="primary" class="btn" @click="getUp" :disabled="show"
          >上一页</el-button
        >
        <el-button type="primary" class="btn" @click="getNext" :disabled="show1"
          >下一页</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import Search from '@/componment/search.vue'
import { getRegion, postRegion, delRegion } from '@/api/article'
export default {
  created () {
    this.getRegion()
  },
  data () {
    return {
      tableData: [],
      pageIndex: 1,
      pageSize: 10,
      totalCount: '',
      totalPage: '',
      show1: false,
      show: true,
      visible: false,
      formDate: {
        text: '',
        textarea: ''
      },
      rules: {
        text: [
          { required: true, message: '请输入部门负责人', trigger: 'blur' }
        ],
        textarea: [
          { required: true, message: '请输入部门介绍', trigger: 'blur' }
        ]
      },
      display: 'add'
    }
  },
  methods: {
    async getRegion () {
      const res = await getRegion({
        pageIndex: this.pageIndex,
        pageSize: this.pageSize
      })
      console.log(res)
      this.tableData = res.currentPageRecords
      this.totalCount = res.totalCount
      this.totalPage = res.totalPage
      this.tableData.forEach((item, index) => {
        item.index = index + 1 + (this.pageIndex - 1) * 10
      })
    },
    getNext () {
      this.pageIndex++
      if (this.$refs.search.form.name !== '') {
        this.searchFn(this.$refs.search.form.name)
      } else {
        this.getRegion()
      }
      if (+this.pageIndex === +this.totalPage) {
        this.show1 = true
      }
      this.show = false
      this.tableData.forEach((item, index) => {
        item.index = index + 1 + (this.pageIndex - 1) * 10
      })
    },
    getUp () {
      this.pageIndex--
      if (this.$refs.search.form.name) {
        this.searchFn(this.$refs.search.form.name)
      } else {
        this.getRegion()
      }
      if (+this.pageIndex < +this.totalPage) {
        this.show = false
        if (+this.pageIndex === 1) {
          this.show = true
        }
      }
      this.show1 = false
      this.tableData.forEach((item, index) => {
        item.index = index + 1 + (this.pageIndex - 1) * 10
      })
    },
    closeFn () {
      this.visible = false
      this.$refs.box.resetFields()
    },
    getArea () {
      this.visible = true
      this.display = 'add'
      this.formDate.text = ''
      this.formDate.textarea = ''
    },
    async addRegion () {
      await this.$refs.box.validate(async (isOk) => {
        if (isOk) {
          await postRegion({
            regionName: this.formDate.text,
            remark: this.formDate.textarea
          })
          if (this.display === 'add') {
            this.$message.success('添加成功')
          } else if (this.display === 'pre') {
            this.$message.success('修改成功')
          }
          this.$refs.box.resetFields()
          this.visible = false
          this.$refs.search.form.name = ''
          this.getRegion()
        }
      })
    },
    async delRegion (id) {
      try {
        await this.$confirm('是否确定删除', '提示')
        await delRegion(id)
        this.getRegion()
        this.$message.success('删除成功')
      } catch (err) {
        this.$message.success('取消成功')
      }
    },
    changeFn (id) {
      this.display = 'pre'
      this.visible = true
      this.tableData.forEach((item) => {
        if (item.id === id) {
          this.formDate.text = item.name
          this.formDate.textarea = item.remark
        }
        delRegion(id)
      })
    },
    seeFn (id) {
      this.display = 'see'
      this.visible = true
      this.tableData.forEach((item) => {
        if (item.id === id) {
          this.formDate.text = item.name
          this.formDate.textarea = item.remark
        }
      })
    },
    async searchFn (id) {
      if (id === '') {
        this.getRegion()
        this.$message.success('搜索成功')
        if (+this.pageIndex !== +this.totalPage) {
          this.show1 = false
        }
      }
      try {
        if (id) {
          const res = await getRegion({
            pageIndex: this.pageIndex,
            pageSize: 10,
            name: id
          })
          this.$message.success('搜索成功')
          this.tableData = res.currentPageRecords
          console.log(res)
          this.totalCount = res.totalCount
          this.totalPage = res.totalPage

          // this.totalPage =
          //   Math.floor(this.tableData.length / 10) >= 1
          //     ? Math.floor(this.tableData.length / 10)
          //     : 1
          if (+this.pageIndex === +this.totalPage) {
            this.show1 = true
          }
          this.tableData.forEach((item, index) => {
            item.index = index + 1 + (this.pageIndex - 1) * 10
          })
        }
      } catch (err) {
        this.$message.error('搜索失败')
        this.getRegion()
      }
    }
  },

  computed: {
    getShow () {
      let title = '新增区域'

      if (this.display === 'add') {
        title = '新增区域'
      } else if (this.display === 'see') {
        title = '区域详情'
      } else {
        title = '修改区域'
      }
      return title
    }
  },
  watch: {},
  filters: {},
  components: {
    Search
  }
}
</script>

<style scoped>
span {
  margin: 5px;
}
.table {
  width: 100%;
  min-height: 200px;
  margin-top: 20px;
}
.el-button {
  background-color: #ff7730;
  border-color: #ff7730;
  margin-left: 20px;
}
.el-table {
  padding-left: 20px;
}
.btn {
  background-color: #d5ddf8;
  border-color: #d5ddf8;
  color: black;
  width: 100px;
  margin-right: 20px;
}
.btnbox {
  float: right;
  margin-right: 100px;
}
.btnspan {
  color: #dbdfe7;
  font-size: 18px;
  margin-top: 30px;
  margin-left: 10px;
  cursor: hand;
}
/* .el-form {
  width: 400px !important;
} */
.show {
  display: none !important;
}
.header {
  width: 100%;
  height: 60px;
  background-color: #fff;
  padding-top: 20px;
  padding-left: 20px;
}
.el-button {
  margin-left: 20px;
}
body {
  background-color: #f8fafd;
}
</style>
<style>
.el-dialog__footer {
  text-align: center !important;
}
</style>
